<template>
  <div class="bg">
    <el-form
        @keyup.enter.native="dataFormSubmit()"
        label-width="70px"
        :inline="true"
        class="login-container"
        :model="form"
        :rules="rules"
        ref="form"
    >
      <h3 class="login_title">系统登录</h3>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入账号"></el-input></el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
        ></el-input></el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dataFormSubmit()">登录</el-button>
      </el-form-item>
      <el-form-item class="login"
      ><router-link to="loginup">没有账户立即注册</router-link></el-form-item
      >
    </el-form>
  </div>
</template>

<script>
import {login} from "@/utils/data"
export default {
  name: "MyLogin",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            trigger: "blur",
            message: "请输入用户名",
          },
        ],
        password: [{ required: true, trigger: "blur", message: "请输入密码" }],
      },
    };
  },
  methods: {
    dataFormSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          login({
            'username': this.form.username,
            'password': this.form.password,
            'po': "群众",
            'yzm':"2612"
          }).then((res) => {
            console.log(res);
            if(res.success===true){
              this.$message.success("登录成功")
              this.$router.push("/home");
            }else {
              this.$message.error(res.message)
            }
          }).catch(error=>{
            console.log(error)
          });
        }
      })
    },
  },
};
</script>
<style lang="less" scoped>
.bg {
   user-select: none;
   width: 100vw;
   height: 100vh;
   background-image: url(@/assets/images/bg.png);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   .login_title::after {
     content: "";
      display: block;
      width: 100px;
      height: 5px;
      margin: 5px auto;
      background-color: #409eff;
     }
}
.login-container {
  position:absolute;
  top: 20%;
  right: 20%;
  width: 350px;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 25px #cac6c6;
  box-sizing: border-box;
  h3 {
    text-align: center;
    margin-bottom: 40px;
    color: #505458;
  }
  .el-input {
    width: 198px;
  }
  .el-button {
    margin-left: 122px;
    margin-top: 10px;
  }
  .login {
    width: 100%;
    text-align: center;
    margin: 0;
  }
}
</style>
